<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        .box1,.box2,.box3,.box4,.box5,.box6{
            width: 100px;
            height: 100px;
            margin-top: 20px;
            background-color: tomato;
            /*
                transition-property
                    - 应用过渡效果的属性
                    - all 表示所有样式

               transition-duration
                - 过渡效果所花费的时间
                - 单位：
                    s 秒
                    ms 毫秒

               transition-delay
                - 过渡效果的延时

               transition-timing-function
                - 指定过渡的时间的曲线
                - 可选值：
                    ease， 默认值 先加速然后减速
                    linear 匀速运动
                    ease-in 加速运动
                    ease-out 减速运动
                    贝塞尔曲线 自定义运动方式
                        https://cubic-bezier.com/
                    steps() 分步执行动画


              transition
                - 过渡的简写属性，可以同时设置过渡的所有样式

            */

            /*transition-property: width, background-color;*/
            transition-property: all;
            transition-duration: 5000ms;
            /*transition-delay: 1s;*/
            /*transition-timing-function: ;*/
            transition-timing-function: steps(5, start);


        }

        body:hover .box1{
            /*width: 500px;*/
            /*background-color: #bfa;*/
            margin-left: 600px;
        }

        body:hover .box2{
            margin-left: 600px;
        }

        body:hover .box3{
            margin-left: 600px;
        }

        body:hover .box4{
            margin-left: 600px;
        }

        body:hover .box5{
            margin-left: 600px;
        }

        body:hover .box6{
            margin-left: 600px;
        }

        .box2{
            background-color: #bfa;
            /*transition-timing-function: linear;*/
            transition: all 3s 1s linear ;
        }

        .box3{
            background-color: orange;
            transition-timing-function: ease-in;

        }

        .box4{
            background-color: greenyellow;
            transition-timing-function: ease-out;


        }

        .box5{
            background-color: orange;
            transition-timing-function: ease-in-out;

        }

        .box6{
            background-color: skyblue;
            transition-timing-function: cubic-bezier(.42,1.56,1,-1.37);

        }
    </style>
</head>
<body>

<!--
    过渡（transition）
        - 通过过渡可以使得元素在样式发生变化时，一点一点的改变
-->

<div class="box1"></div>
<div class="box2"></div>
<div class="box3">ease-in</div>
<div class="box4">ease-out</div>
<div class="box5"></div>
<div class="box6"></div>

</body>
</html>